<template>
  <div class="am-content">
    <div class="amc-toolbar">
      <!--
      <el-select v-model="query.areaId" :props="treeProp" clearable placeholder="区域">
          <el-option v-for="item in treeData" :key="item.areaId" :label="item.areaName" :value="item.areaId"/>
      </el-select>
      <el-select v-model="query.areaId" clearable placeholder="接警民警" style="margin:0px 10px;">
          <el-option v-for="item in treeData" :key="item.areaId" :label="item.areaName" :value="item.areaId"/>
      </el-select>
      -->
      <el-date-picker
        v-model="pickerTime"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        align="right"
        @change="datePickerChanage">
      </el-date-picker>
      <!--<treeselect class="m-input-width" style="margin-left:10px;" v-model="query.deptId" :options="treeData" :normalizer="normalizer" placeholder="选择隶属部门"/>-->
      <!--<el-input class="m-input-width" style="margin-left:10px;" v-model="query.userName" clearable placeholder="输入报警人姓名"/>-->
      <el-button type="success" icon="el-icon-search" style="margin-left:10px;" @click="toQuery">搜索</el-button>
      <el-button type="warning" icon="el-icon-refresh-left" @click="resetQuery">重置</el-button>
      <el-button type="primary" icon="el-icon-refresh" @click="refreshQuery">刷新</el-button>
    </div>
    <ul class="alarm-list">
      <li class="alarm-li" v-for="(item,index) in tableData" :key="item.id">
        <img class="m-img" src="@/assets/police_oa/pic09.png" alt="">
        <div class="ali-m">
          <p>报警人姓名: {{ item.userName }} 性别: {{ item.sex }} 身份证号: {{ item.idCard }} 手机号码: {{ item.phone }}</p>
          <p>接警民警: {{ item.officerName }} 警号: {{ item.officerAccount }} 隶属部门: {{ item.deptName }}</p>
          <p>报警时间: {{ item.alarmDate }}</p>
          <p>报警地点: {{ item.address }}</p>
        </div>
        <div class="ali-r">
          <el-button type="primary" @click="tableDataTap(item.id)">查看视频</el-button>
        </div>
      </li>
    </ul>
    <el-pagination
      :current-page="curPage"
      :page-size="limit"
      layout="total, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import paginationb from "@/mixins/paginationb";
import ElDatePicker from "@/mixins/ElDatePicker";
export default {
  name: "VideoAlarmRecord",
  components: { Treeselect },
  mixins: [paginationb, ElDatePicker],
  data() {
    return {
      queryUrl: "/api-bureau/portal/acceptance/record",
      query: {
        status: 1,
        bizType: 0
      },
      // treeData: [],
      treeProp: {
        label: "deptName"
      }
    };
  },
  mounted() {
    let that = this;
    that.queryData();
  },
  methods: {
    tableDataTap(id) {
      this.$router.push({
        path: "detail",
        query: {
          id: id
        }
      });
    },
    resetQuery() {
      this.curPage = 1;
      this.query = {
        status: 1,
        bizType: 0
      };
      this.queryData();
    }
    /*
    normalizer(node) {
        return {
            id: node.id,
            label: node.deptName,
            children: node.children
        };
    }*/
  }
}
</script>

<style lang="scss" scoped>
@import "../../../styles/police-common.scss";
.alarm-list {
  padding: 0px;
}

.alarm-li {
  display: flex;
  flex-direction: row;
  border: 1px solid #e8e8e8;
  margin: 20px 0px;
  padding: 20px;
}

.m-img {
  width: 208px;
  height: 145px;
  margin-right: 20px;
}

.ali-m {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;

  p {
    margin: 10px 0px;
    font-size: 14px;
    color: #666666;
  }
}

.ali-r {
  align-self: flex-end;
}
</style>
